<template>
    <section>
        <div>
            <el-col class="button-card" v-for="(device, index) in cardData" :key="index">
                <el-card class="button-box-card">
                    <div slot="header" class="clearfix">
                        <el-input style="width: 60%" v-model="aliasName[index]"></el-input>
                        <el-button style="float: right; margin-left: 10px" 
                            type="danger" icon="el-icon-s-operation" circle @click="dialogShow(index)"></el-button>
                    </div>
                    <div>
                        <div class="cow-container" @change="pushButton(device, index)">
                            <div class="cow-toggle">
                                <input type="checkbox" v-model="device.Status">
                                <span class="cow-button">
                                    <div class="button-status-point" v-bind:style="{background: device.Status==1?'#E6A23C':'#67C23A'}"></div>
                                </span>
                                <span class="cow-label">{{device.Status?'开':'关'}}</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </div>
        <el-dialog
            title="功率调节"
            :visible.sync="dialogVisible"
            width="65%">
            <el-slider v-model="powerValue" @change="powerKnob()"></el-slider>
        </el-dialog>
    </section>
</template>

<style>
    .button-card {
        padding: 5px 5px;
        width: 200px
    }
    .button-box-card {
        width: 190px;
        height: 265px;
    }
    .button-status-point {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
</style>

<script>

    import "@/assets/css/cow-button.css";

    import {getButtonIndex, controlButton} from '../../api/api';

    export default {
        data() {
            return {
                cardData: [],
                aliasName: [],
                dialogVisible: false,
                powerValue: 15,
                deviceIndex: 0
            };
        },
        methods: {
            getButton() {
                getButtonIndex().then((res) => {
                    if (res.data.code == "SUCCESS") {
                        let mid = "";
                        let dataList = res.data.data.split(',');
                        // 排序
                        for (let i=0; i < dataList.length-1; i++) {
                            for (let j=0; j < dataList.length-1-i; j++) {
                                if (dataList[j] > dataList[j+1]) {
                                   mid = dataList[j];
                                   dataList[j] = dataList[j+1];
                                   dataList[j+1] = mid;
                                }
                            }
                        }
                        let list = [];
                        // 分割
                        dataList.map((status, s1) => {
                            if (status != "") {
                                let device = status.split(":");
                                this.aliasName[s1] = device[0];
                                if (device.length == 2) {
                                    // 显示别名
                                    res.data.info.split(',').map((alias, s2) => {
                                        let name = alias.split(":");
                                        if (name.length == 2 && device[0] == name[0] && name[0] != name[1]) {
                                            this.aliasName[s1] = name[1]
                                        }
                                    })
                                    list[s1] = {Name: device[0], Status: (device[1]=="ON")?true:false}
                                }
                            }
                        })
                        this.cardData = list;
                    }
                });
            },
            controlSwitch(device, index, code) {
                controlButton({data:code, name:device.Name, alias: this.aliasName[index]}).then((res) => {
                    if (res.code == "SUCCESS") {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 600
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error',
                            duration: 600
                        });
                    }
                });
            },
            pushButton(device, index) {
                let code = "CONTROL/:"+device.Name+"/:"+(device.Status?"ON":"OFF");
                this.controlSwitch(device, index, code);
            },
            powerKnob() {
                let value = parseInt(this.powerValue * 2.6);
                if (value > 250) {
                    value = 255
                }
                let code = "CONTROL/:"+this.cardData[this.deviceIndex].Name+"/:"+value;
                this.controlSwitch(this.cardData[this.deviceIndex], this.deviceIndex, code);
            },
            dialogShow(index) {
                this.dialogVisible = true;
                this.deviceIndex = index;
            }
        },
        mounted() {
            this.getButton();
        }
    }
</script>